<template>
    <van-nav-bar
  title="我的订单"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.push('/')}"
/>

<van-tabs v-model:active="active" @change="onChange">
    <van-tab title="全部"></van-tab>
  <van-tab title="待付款"></van-tab>
  <van-tab title="已付款"></van-tab>
  
</van-tabs>

<!-- 订单渲染区域 -->
 <div class="orderlist" v-for="item in fetchlist">
    <div class="order">
        <div>下单时间:<span>{{item.create_time}}</span></div>
        <div>订单号:<span>{{item.orderId}}</span></div>
        <div>订单介绍:<span>{{item.product_code}}</span></div>
        <div>订单状态:<span>{{item.status==0?'待付款':"已付款"}}</span></div>
        <div>订单价格:<span>{{item.totalPrice/100}}元</span></div>
    </div>
 </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {orderListApi} from '@/api/api'
//自定义订单列表数据
let orderlist=ref([])
//自定义过滤数据
let fetchlist=ref([])
orderListApi(localStorage.getItem('username')).then((res)=>{
    console.log('订单列表数据',res.data.data)
    orderlist.value=res.data.data
    fetchlist.value=orderlist.value
})

const onChange=(index)=>{
    console.log(index)
    if(index==0){
        fetchlist.value=orderlist.value
    }
    if(index==1){
        fetchlist.value=orderlist.value.filter(item=>item.status==0)
    }
    if(index==2){
        fetchlist.value=orderlist.value.filter(item=>item.status>=1)
    }
}

//默认显示
onMounted(()=>{
    onChange(0)
})
</script>

<style lang="scss" scoped>
.order{
    width:90%;
    height: 100px;
    background: #eee;
    margin: 20px 5px;
    font-size: 12px;
}
</style>